import React, { Component } from "react";
import Header from "../Header/index";
import List from "../List/index";
import Footer from "../Footer/index";
import "./index.css";

class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todoList: [
        { id: 0, content: "吃饭", done: false },
        { id: 1, content: "睡觉", done: false },
        { id: 2, content: "打豆豆", done: false }
      ],
    };
  }

  // 删除任务
  del = (id) => {
    let { todoList } = this.state;
    todoList = todoList.filter((item) => {
      return item.id !== id;
    });
    this.setState({ todoList });
  };
  // 添加任务
  add = (content) => {
    let { todoList } = this.state;
    let item = {};
    item.id = todoList.length;
    item.content = content;
    item.done = false;
    this.setState({ todoList: [item, ...todoList] });
  };
  // 选中和取消选中  还有全选
  check = (id) => {
    let { todoList } = this.state;
    todoList.forEach((item) => {
      if (typeof id === "number") {
        if (item.id === id) {
          item.done = !item.done;
        }
      } else {
        todoList.forEach((item) => {
          item.done = id;
        });
      }
    });
    this.setState({ todoList });
  };

  render() {
    return (
      <div className="content">
        <Header addItem={this.add}></Header>
        <List
          checkItem={this.check}
          deleteItem={this.del}
          data={this.state.todoList}
        ></List>
        <Footer data={this.state.todoList} checkAll={this.check}></Footer>
      </div>
    );
  }
}

export default index;
